<template>
    <div>
        <a-modal title="编辑相关系统" centered v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="选择系统" :span="24" name="systemName">
                            <div>
                                <a-select mode="multiple" :value="defaultValue" style="width: 100%" placeholder="请选择系统" @change="handleSelectChange">
                                    <a-select-option v-for="(item, index) of $store.getters.dicOptions.systemModel" :key="index" :value="item.dimensionName">
                                        {{ item.dimensionName }}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { message } from 'ant-design-vue/es';
import { defineComponent, ref, unref, reactive, toRefs, computed, nextTick } from 'vue';
export default defineComponent({
    emits: ['success'],
    setup(props, { emit }) {
        const state = reactive<any>({
            form: {
                systemName: ''
            },
            visible: false,
            id: null,
            requireId: null,
            type: '1',
            list: [],
            defaultValue: []
        });
        const open = ({ id = null, type }) => {
            state.list = [];
            state.defaultValue = [];
            state.visible = true;
            state.requireId = id;
            state.id = null;
            state.type = type;
            getList();
        };
        const getList = async () => {
            const query = {
                requireId: state.requireId,
                type: state.type
            };
            const { success, moule } = await api.linkSystemModel.getLinkSystem(query);
            if (success) {
                if (moule) {
                    const codeArr = moule.codes.split(',');
                    codeArr.forEach((item) => {
                        const target = store.getters.dicOptions.systemModel.find((elem) => elem.code === item);
                        if (target) {
                            state.defaultValue.push(target.dimensionName);
                        }
                    });
                    state.list = codeArr.map((item) => +item);
                    state.id = moule.id;
                }
            }
        };
        const handleSelectChange = (val) => {
            const list: any = [];
            val.forEach((item) => {
                const target = store.getters.dicOptions.systemModel.find((elem) => elem.dimensionName === item);
                list.push(target.code);
            });
            state.list = list;
        };
        const handleSave = async () => {
            const codes = state.list.join(',');
            const query = {
                requireId: state.requireId,
                type: state.type,
                codes,
                id: state.id
            };
            const { success, errorMsg } = await api.linkSystemModel.save({
                ...query
            });
            if (success) {
                state.visible = false;
                message.success('添加成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ...toRefs(state),
            open,
            handleSelectChange,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>